<template>
    <el-dialog
        :title="configData.title+configData.afterTitle"
        v-model="configData.open"
        width="80%"
        :close-on-click-modal="false"
        append-to-body
    >
        <div class="add-purchase-dialog">
            <div class="top-container">
                <el-form
                    :model="dataContainer.form"
                    ref="FormElRef"
                    :inline="true"
                    label-width="110px"
                >
                    <el-row :gutter="8" class="eqBox">
                        <el-col :span="12" :xs="12">
                            <el-form-item label="财务主体" prop="companyId">
                                <el-select
                                    v-if="!configData.isShow && !dataContainer.form.id"
                                    v-model="dataContainer.form.companyId"
                                    placeholder="请选择"
                                    clearable
                                    filterable
                                    remote
                                    :remote-method="getFinanceSubjectList"
                                    :loading="dataContainer.financeSubjectLoading"
                                    @change="changeFinanceSubject"
                                >
                                    <el-option
                                        v-for="(item, index) in dataContainer.financeSubjectList"
                                        :key="index"
                                        :label="item.name + '-' + item.code"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                                <el-input
                                    v-else
                                    :model-value="
                                        dataContainer.form.companyName +
                                            '-' +
                                            dataContainer.form.companyCode
                                    "
                                    placeholder=" "
                                    :disabled="true"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" :xs="12">
                            <el-form-item label="仓储点位" prop="warehouseName">
                                <el-input
                                    v-if="!configData.isShow && !dataContainer.form.id"
                                    :disabled="true"
                                    v-model="dataContainer.form.warehouseName"
                                    placeholder="请选择"
                                    clearable
                                >
                                    <template #append>
                                        <el-button class="one-btn" @click="showSelectPoint">
                                            选择
                                        </el-button>
                                    </template>
                                </el-input>
                                <el-input
                                    v-else
                                    :model-value="
                                        dataContainer.form.warehouseName +
                                            '-' +
                                            dataContainer.form.warehouseCode
                                    "
                                    placeholder=" "
                                    :disabled="true"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="item-container moduleBox" v-for="(item, index) in dataContainer.list">
                    <BoxHead
                        class="title-container"
                        title="明细"
                        style="margin-bottom:10px;"
                        :showBt="false"
                    >
                        <template #right></template>
                        <template #left>
                            <div style="margin-left:15px;">
                                {{item.form.supplierName}}-{{item.form.supplierCode}}
                            </div>
                        </template>
                    </BoxHead>
                    <div style="margin:5px 0;">入库明细</div>
                    <el-table :data="item.list" style="width: 100%" border>
                        <el-table-column
                            label="序号"
                            width="80"
                            type="index"
                            fixed="left"
                        ></el-table-column>
                        <el-table-column prop="materialName" label="物料名称" min-width="150">
                            <template #header>
                                物料名称
                                <span style="color:red;">*</span>
                            </template>
                            <template #default="scope">
                                {{ scope.row.materialName }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="materialUnit"
                            label="单位"
                            width="100"
                        ></el-table-column>
                        <el-table-column
                            label="消耗类别"
                            show-overflow-tooltip
                            align="center"
                            prop="consumeType"
                            width="120"
                        >
                            <template #default="scope">
                                {{ getDictItemLabel(consume_type, scope.row.consumeType) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="sap评估"
                            show-overflow-tooltip
                            align="center"
                            prop="sapAssess"
                            width="120"
                        >
                            <template #default="scope">
                                {{ getDictItemLabel(bu_sap_assess, scope.row.sapAssess) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="规格"
                            show-overflow-tooltip
                            align="center"
                            prop="standards"
                            width="120"
                        ></el-table-column>
                        <el-table-column
                            label="一级分类"
                            show-overflow-tooltip
                            align="center"
                            prop="matkl1"
                            width="120"
                        ></el-table-column>
                        <el-table-column
                            label="二级分类"
                            show-overflow-tooltip
                            align="center"
                            prop="materialType"
                            width="120"
                        ></el-table-column>
                    </el-table>
                    <div style="margin:5px 0;">入库明细1</div>
                    <el-table :data="item.list_1" style="width: 100%" border>
                        <el-table-column
                            label="序号"
                            width="80"
                            type="index"
                            fixed="left"
                        ></el-table-column>
                        <el-table-column prop="materialName" label="物料名称" min-width="150">
                            <template #header>
                                物料名称
                                <span style="color:red;">*</span>
                            </template>
                            <template #default="scope">
                                {{ scope.row.materialName }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="materialUnit"
                            label="单位"
                            width="100"
                        ></el-table-column>
                        <el-table-column
                            label="消耗类别"
                            show-overflow-tooltip
                            align="center"
                            prop="consumeType"
                            width="120"
                        >
                            <template #default="scope">
                                {{ getDictItemLabel(consume_type, scope.row.consumeType) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="sap评估"
                            show-overflow-tooltip
                            align="center"
                            prop="sapAssess"
                            width="120"
                        >
                            <template #default="scope">
                                {{ getDictItemLabel(bu_sap_assess, scope.row.sapAssess) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="规格"
                            show-overflow-tooltip
                            align="center"
                            prop="standards"
                            width="120"
                        ></el-table-column>
                        <el-table-column
                            label="一级分类"
                            show-overflow-tooltip
                            align="center"
                            prop="matkl1"
                            width="120"
                        ></el-table-column>
                        <el-table-column
                            label="二级分类"
                            show-overflow-tooltip
                            align="center"
                            prop="materialType"
                            width="120"
                        ></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="configData.open = false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
/**
 * 数据详情对话框
 */
import { defineComponent, ref, getCurrentInstance, reactive, nextTick } from 'vue';
import { getMaterials, addMaterials, updateMaterials } from '@/api/material/masterData';
import {
    add as addPurchaseSublistApi,
    update as updatePurchaseSublistApi,
    batchNo as batchNoPurchaseSublistApi,
} from '@/api/material/purchaseSublist';
import {
    getShopp as getShoppApi,
    addShopp as addShoppApi,
    updateShopp as updateShoppApi,
    getPurchaseOrderNo as getPurchaseOrderNoApi,
} from '@/api/material/purchase';
import { listCustomer } from '@/api/mainData/customerManage';
import { mergeObjProperty } from '@/common/OtherTools';
import BoxHead from '@/components/BoxHead';
import { getDictItemLabel, getDictItem, numberToFixed,initDataByConfig } from '@/common/OtherTools';
import { listCompany as listCompanyApi } from '@/api/system/firm/firm';

export default defineComponent({
    name: 'DataInfo',
    components: {
        BoxHead,
    },
    emits: ['onSuccess'],
    setup(_, { emit }) {
        const { proxy: instance } = getCurrentInstance();
        const configMap = {
            //配置信息，初始化时使用
            open: {
                oldValue: false,
            },
            title: {
                oldValue: '入库',
            },
            afterTitle: {
                oldValue: '',
            },
            isShow: {
                //是否只是展示
                oldValue: false,
            },
        };
        const configData = reactive({});
        const dataContainer = reactive({
            financeSubjectLoading: false,
            form: {},
            rules: {},
            list: [],
            financeSubjectList: [],
        });
        const dictData = instance.useDict(
            'consume_type',
            'item_class',
            'sys_tax_rate',
            'bu_sap_assess',
        );
        initDataByConfig(configData,{},configMap);
        /** 初始化数据（外部调用） */
        function initData(show = true, data_ = {}, option = {}) {
            initDataByConfig(configData,option,configMap);
            dataContainer.list = [];
            configData.open = show;
            nextTick(() => {
                dataContainer.form = data_;
                if (data_.id) {
                    getDataInfo();
                }
            });
            // getFinanceSubjectList();
        }
        /** 获取数据 */
        function getDataInfo() {
            getPurchaseOrderNoApi({
                purchaseOrderNo:dataContainer.form.purchaseOrderNo,
            }).then(res=>{
                const dataList = res.data || [];
                dataContainer.list = [];
                dataList.forEach(item=>{
                    dataContainer.list.push({
                        form:item,
                        list:item.maInstockRecordList,
                        list_1:item.maPurchaseSublistList,
                    });
                });
            });
        }
        /** 完成后 */
        function onSuccess(params) {
            configData.open = false;
            emit('onSuccess', params);
        }
        /** 获取财务主体列表 */
        function getFinanceSubjectList(name) {
            dataContainer.financeSubjectLoading = true;
            listCompanyApi({
                pageNum: 1,
                pageSize: 999,
                type: 1,
                name: name,
            })
                .then(res => {
                    dataContainer.financeSubjectList = res.rows || [];
                })
                .catch(() => {
                    return;
                })
                .finally(() => {
                    dataContainer.financeSubjectLoading = false;
                });
        }
        return {
            configData,
            initData,
            onSuccess,
            dataContainer,
            getDictItemLabel,
            ...dictData,
        };
    },
});
</script>

<style lang="scss" scoped>
.add-purchase-dialog {
    :deep(.el-form--inline .el-form-item) {
        width: 100%;
    }
}
</style>
